<template>
	<view class="page">
		<view class="bar_info" :class="scrollTop > 50 ? 'bar_info_active' : ''" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="isBack">
					<u-icon size="38" color="#000" name="arrow-left"></u-icon>
				</view>
				<view class="title_bar_center">
					卡详情
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#0E7EFD"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		
		<view class="details_info" v-else>
			<swiper v-if="!video_show" class="details_video" :circular="true" :indicator-dots="true" :autoplay="true" :interval="8000" :duration="1000" indicator-color="#ffffff" indicator-active-color="#0278FC">
				<block v-for="(v, k) in detailInfo.images" :key="k">
					<swiper-item v-if="v.type == 'video'" @tap="playVideo(v.video)">
						<view class="swiper-item">
							<image :src="v.image" mode="aspectFill"></image>
							<image class="play_btn" src="./static/2.png" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item v-else>
						<view class="swiper-item">
							<image :src="v.image" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<view class="video_content" v-show="video_show">
				<video ref="video" id="video" :src="videoSrc" object-fit="fill" :autoplay="true" @error="videoError" @pause="videoPause" @ended="videoEnd"></video>
			</view>
			<view class="details_card">
				<view class="card_title">{{detailInfo.title}}</view>
				<view class="profile">
					<view class="profile_1"></view>
					<view class="profile_2">{{detailInfo.desc}}</view>
				</view>
				<view class="profile_price">
					<text class="profile_price_1"></text>
					<text class="profile_price_2" v-if="detailInfo.price == 0">免费</text>
					<text class="profile_price_2" v-else>{{detailInfo.price}}</text>
				</view>
			</view>
			<view class="card_info">
				<view class="card_info_1">
					<image src="./static/3.png" mode=""></image>
				</view>
				<view class="card_info_2">
					<u-parse :html="detailInfo.content"></u-parse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				id: "",
				content: "",
				detailInfo: {
					images: []
				},
				scrollTop: 0,
				videoSrc: "",
				video_show: false,
				videoContext: null
			}
		},
		onLoad(option) {
			let {id} = option;
			if (id !== undefined) this.id = id;
			this.getDetail();
		},
		onReady() {
			this.videoContext = uni.createVideoContext('video', this);
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 银行卡详情  postCardDetail
			getDetail() {
				this.$api.post(global.apiUrls.postCardDetail, {
					card_id: this.id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.detailInfo = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			playVideo(url) {
				this.videoSrc = url;
				this.video_show = true;
				this.videoContext.play();
			},
			videoError() {
				this.$message.info('视频播放失败，请稍后再试');
				this.video_show = false;
			},
			videoEnd() {
				this.video_show = false;
			},
			videoPause() {
				this.video_show = false;
			},
			
			isBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: url('https://asjf.yunyakeji.cn/uploads/mini/7.png') no-repeat;
		background-size: 100% 100vh !important;
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			background: transparent;
			z-index: 10;
			position: fixed;
			top: 0rpx;
		
			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
		
				.title_bar_left {
					width: 50rpx;
					display: flex;
					align-items: center;
				}
		
				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}
		
				.title_bar_right {
					width: 50rpx;
				}
			}
		}
		.bar_info_active {
			background: #EEF0FA;;
		}
		.details_info {
			padding: 30rpx;
			.details_video {
				width: 100%;
				height: 437rpx;
				position: relative;
				swiper-item {
					width: 100%;
					height: 100%;
					.swiper-item {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
				image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
				.play_btn {
					width: 85rpx;
					height: 86rpx;
					position: absolute;
					top: 176rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			.video_content {
				width: 100%;
				height: 437rpx;
				video {
					width: 100%;
					height: 100%;
				}
			}
			.details_card {
				margin: 24rpx 0;
				padding: 36rpx 32rpx;
				background: #fff;
				border-radius: 20rpx;
				.card_title {
					font-weight: 900;
					font-size: 36rpx;
					margin-bottom: 24rpx;
				}
				.profile {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					.profile_1 {
						display: inline-block;
						width: 10rpx;
						height: 10rpx;
						background: #ccc;
						margin-right: 12rpx;
						border-radius: 50%;
					}
					.profile_2 {
						width: calc(100% - 22rpx);
						font-size: 24rpx;
						color: #666;
					}
				}
				.profile_price {
					display: flex;
					align-items: center;
					.profile_price_1 {
						display: inline-block;
						width: 10rpx;
						height: 10rpx;
						background: #FF8A00;
						margin-right: 12rpx;
						border-radius: 50%;
					}
					.profile_price_2 {
						font-size: 24rpx;
						color: #FF8A00;
					}
				}
			}
			.card_info {
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx 0;
				.card_info_1 {
					width: 220rpx;
					height: 32rpx;
					margin: 0 auto 24rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.card_info_2 {
					padding: 0 16rpx;
				}
			}
		}
	}
</style>